import { useState } from "react";
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";

import "./index.scss";
import { Button, Menu } from "antd";

const menuItems = [
  {
    label: "首页",
    key: "/creator/home",
  },
  {
    label: "内容管理",
    key: "content",
    children: [
      {
        label: "文章管理",
        key: "/creator/article",
      },
      {
        label: "专栏理",
        key: "/creator/column",
      },
    ],
  },
];

export default function CreatorCenter() {
  const location = useLocation();
  const navigate = useNavigate();
  const [selectedKey, setSelectedKey] = useState(location.pathname);

  const menuClick = (data: any) => {
    console.log(data);
    setSelectedKey(data.key);
    navigate(data.key);
  };
  return (
    <section className='creator-center-container'>
      <section className='creator-header'>创作中心</section>
      <section className='creator-body'>
        <section className='creator-sider'>
          <section>
            <Link to='/editor' target="_blank">
              <Button size='large' type='primary' block>
                写文章
              </Button>
            </Link>
          </section>
          <Menu defaultSelectedKeys={[selectedKey]} mode='inline' items={menuItems} onClick={menuClick}></Menu>
        </section>
        <section className='creator-main'>
          <Outlet />
        </section>
      </section>
    </section>
  );
}
